<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			* {
				text-align: center;
			}
			
			.bounce-enter-active {
				animation: bounce-in 1s;
			}
			
			.bounce-leave-active {
				animation: bounce-out 3s;
			}
			
			@keyframes bounce-in {
				0% {
					transform: scale(0);
				}
				50% {
					transform: scale(1.5);
				}
				100% {
					transform: scale(1);
				}
			}
			
			@keyframes bounce-out {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(1.5);
				}
				100% {
					transform: scale(0);
				}
			}
			
			#example-2 {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="example-2">
			<button @click="show = !show">Toggle show</button>
			<transition name="bounce" v-on:before-enter="beforeEnter" v-on:enter="enter"  @after-enter="afterEnter"  v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled">
				<p v-if="show">Look at me!</p>
			</transition>
		</div>
		<!--//其他第三方 CSS 动画库，如 Animate.css-->
		<div id="example-3">
			<button @click="show = !show">
			   Toggle render
			</button>
			<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
				<p v-if="show">hello</p>
			</transition>
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#example-2',
				data: {
					show: false
				},
				methods: {
					// --------
					// 进入中
					// --------
					beforeEnter: function(el) {
						console.log('1')
					},
					// 此回调函数是可选项的设置
					// 与 CSS 结合时使用
					enter: function(el, done) {
						console.log('2')
					},
					afterEnter: function(el) {
						console.log('aa')
					},
					enterCancelled: function(el) {
						console.log('4')
					},
					// --------
					// 离开时
					// --------
					beforeLeave: function(el) {
						console.log('5')
					},
					// 此回调函数是可选项的设置
					// 与 CSS 结合时使用
					leave: function(el, done) {
						console.log('6')
					},
					afterLeave: function(el) {
						console.log('7')
					},
					// leaveCancelled 只用于 v-show 中
					leaveCancelled: function(el) {
						console.log('8')
					}
				}
			})
			new Vue({
				el: '#example-3',
				data: {
					show: true
				}
			})
		</script>
	</body>

</html>